<template>
  <div id="app" class="page-container">
    <section class="page-top">
      <section class="page-top-menu-layout">
        <div class="logo">
            <img :src=imgPath alt="">
        </div>
        <!-- 顶部导航栏 -->
        <div class="top-menu">
          <main-menu></main-menu>
        </div>
      </section>
    </section>
    <section class="page-submenu">
      <!-- 侧栏 -->
      <sub-menu ref='submenu'></sub-menu>
    </section>
    <section class="page-main">
      <section class="page-content">
        <breadcrumb></breadcrumb>
        <router-view></router-view>
      </section>
    </section>

    <!-- 通用组件挂载，都通过vuex控制 -->
  </div>
</template>

<script>
// import { mapActions } from 'vuex'
import MainMenu from 'components/mainMenu.vue'
import SubMenu from 'components/sideMenu.vue'
import Breadcrumb from 'components/breadcrumb.vue'
import GoodsCommon from 'components/goods/goodsCommon.vue'
export default {
  name: 'app',
  data () {
    return {
      imgPath: require('assets/images/logo.png')
    }
  },
  watch: {
    $route () {
      // console.log(this.$refs.submenu.$destory())
    }
  },
  components: {
    MainMenu,
    SubMenu,
    Breadcrumb,
    GoodsCommon
  }
}
</script>

<style lang="less">
@pageWidth:90%;
html,body{
  height: 100%;
  background: #f0f0f0;
}
.page-container{
  min-height: 100%;
}
.page-top{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 90px;
  display: flex;
  border-bottom: 10px solid #f0f0f0;
  width: 100%;
  justify-content:center;
  background: #324057;
}
.page-top-menu-layout{
  width: @pageWidth;
  display:flex;
}
.logo{
  width: 220px;
  img{
    margin-top: 22px;
    margin-left: 50px;
  }
}
.top-menu{
  flex:1;
}
.page-main{
  width: @pageWidth;
  margin:0 auto;
  // min-height: 100%;
  margin-top: 100px;
  overflow: hidden;
}
.page-submenu{
  position:fixed;
  top: 100px;
  left: 50%;
  margin-left: -@pageWidth/2;
  bottom:0;
  float: left;
  overflow: auto;
  width: 200px;
  overflow: auto;
  background: #324057;
}
.page-content{
  margin-left: 210px;
  overflow: auto;
  background: #fff;
}
.page-content{
  padding: 20px;
}
.mb20{
  margin-bottom: 20px;
}
.mt20{
  margin-top: 20px;
}
#app .el-date-editor--datetimerange {
  width: 100%;
}

.title_tip{
  text-align: center;
  font-size: 20px;
}
.btn_group{
  text-align: center
}
</style>
